import { CSSProperties, FC } from 'react';
import KLoading from '../loading';
import { Text } from '@tarojs/components';
import KImage from '../image';
import $style from './index.scss';
import { PullLoadStatus } from './pull-load';
import { pxTransform } from '../../utils';
import Divider from '../divider';

interface PullLoadStatusProps {
    status: PullLoadStatus;
    pullStyle: CSSProperties;
    onRetry?: () => void;
    onRefresh?: any;
}
type PullStatus = 'pulling' | 'canRelease' | 'refreshing';
export const PullStatusMap: {
    [key in PullStatus]: { text: string };
} = {
    pulling: {
        text: '下拉查看历史消息'
    },
    canRelease: {
        text: '松手查看历史消息'
    },
    refreshing: {
        text: ''
    }
};

const PullLoadStatus: FC<PullLoadStatusProps> = function ({
    status,
    onRetry,
    pullStyle,
    onRefresh
}) {
    if (['canRelease', 'pulling', 'refreshing'].includes(status)) {
        const pullState = PullStatusMap[status as PullStatus];
        return (
            <div
                className={$style.pull}
                style={pullStyle}
                onClick={onRefresh}
            >
                <div className={[$style['pull-content']]}>
                    <Text className={$style['pull-text']}>{pullState.text}</Text>
                    {pullState.text && (
                        <KImage
                            className={[
                                status === 'canRelease'
                                    ? $style['pull-rotate']
                                    : $style['pull-image']
                            ]}
                            size={pxTransform(24)}
                            src='https://kf-ui.cdn-go.cn/weapp-image/latest/weapp-110/image/ai/aientrances_icon_reload.png'
                        ></KImage>
                    )}
                </div>
            </div>
        );
    }
    if (status === 'loading') {
        return (
            <div className={[$style.load]}>
                <KLoading src='https://kf-ui.cdn-go.cn/weapp-image/latest/weapp-110/image/cross/custom/wx/icon_loading.png'></KLoading>
            </div>
        );
    }
    if (status === 'noMore') {
        return (
            <div className={[$style.load]}>
                <Divider>
                    <Text className={$style['load-text']}>没有更多历史消息</Text>
                </Divider>
            </div>
        );
    }
    if (status === 'loadError') {
        return (
            <div className={[$style.load]}>
                <div className={$style['load-error-icon']}></div>
                <Text className={$style['load-error-text']}>历史消息拉取失败</Text>
                <div
                    className={$style['load-fefresh']}
                    onClick={onRetry}
                >
                    点击重试
                </div>
            </div>
        );
    }
    return null;
};

export default PullLoadStatus;
